<template>
	<view class="wrap">
		<view class="userMsg dis">
			<view class="dis userMsg-left">
				<image :src="userInfo.avatar" mode=""></image>
				{{userInfo.nickname}}
			</view>
			<view class="userMsg-right">
				积分：{{userInfo.integral||0}}
			</view>
		</view>
		<view class="jgg">
			<!-- :grid_info_arr="list" -->
			<LotteryDraw @get_winingIndex='get_winingIndex' :grid_info_arr="list" @luck_draw_finish='luck_draw_finish'>
			</LotteryDraw>
			<view class="" style="font-size: 28rpx;color:#fff;margin-top: 20px;">
				本次抽奖需要{{message||0}}积分，请确认您的积分是否充足！！
			</view>
		</view>

		<view class="jp-bnt" @click="goPage()">
			我的奖品
		</view>


	</view>
</template>

<script>
	import {

		getUserInfo
	} from "@/api/user";
	import {
		getUserAgreement,
		getLotteryList,
		getLotteryDraw
	} from '@/api/togeterRich/index.js'
	import LotteryDraw from '@/components/SJ-LotteryDraw/SJ-LotteryDraw.vue';
	export default {
		components: {
			LotteryDraw
		},
		data() {
			return {
				message: 0,
				userInfo: {},
				list: [],
				lottery_draw_param: {
					startIndex: 0, //开始抽奖位置，从0开始
					totalCount: 2, //一共要转的圈数
					winingIndex: 4, //中奖的位置，从0开始
					speed: 50 //抽奖动画的速度 [数字越大越慢,默认100]
				}
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				let data = {
					key: "lottery_cost"
				}
				getUserAgreement(data).then(res => {
					// console.log(res, 'ress')
					// return;
					this.message = res.message

				}).catch(err => {
					that.$util.Tips({
						title: err.msg
					});
				})
				getUserInfo().then(res => {
					this.userInfo = res.data
					// console.log("res,''", res)
				})
				getLotteryList().then(res => {
					this.list = res.data
					// this.list.push({})
					// console.log(res, 'choujiang')
				})
			},
			goPage() {
				uni.navigateTo({
					url: "/pagesA/poinTraffle/myPrize/index"
				})
			},
			// 修改获奖位置（可以在这里获取后台的数据
			get_winingIndex(callback) {
				getLotteryDraw().then(res => {
					console.log("res中奖了", res.data.id - 1)
					this.lottery_draw_param.winingIndex = res.data.id - 1;
					//props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
					callback(this.lottery_draw_param);
				})
				// console.log("什么时候触发")

			},
			// 抽奖完成
			luck_draw_finish(param) {
				if (param.prizeName == '谢谢参与') {
					this.winPup("很遗憾", '本次抽中的是' + param.prizeName, '我的奖品', )
				} else {
					if (param.prizeName.search("积分") != -1) {
						this.winPup("恭喜你中奖了", '恭喜你抽中了' + param.prizeName + '已默认直接到账', '其他奖品', )
						getUserInfo().then(res => {
							this.userInfo = res.data
							// console.log("res,''", res)
						})
					} else {
						this.winPup("恭喜你中奖了", '恭喜你抽中了' + param.prizeName, '去领取', )
					}

				}

				console.log(param)
				// console.log(`抽到第${param+1}个方格的奖品`)
			},
			winPup(title, content, confirmText) {
				uni.showModal({
					title: title,
					content: content,
					showCancel: true,
					cancelText: '我知道了',
					confirmText: confirmText,
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pagesA/poinTraffle/myPrize/index"
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userMsg {

		justify-content: space-between;
		align-items: center;
		padding: 60rpx 30rpx;
		color: #fff;

		.userMsg-right {
			font-size: 30rpx;

		}

		.userMsg-left {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			image {
				margin-right: 20rpx;
				vertical-align: middle;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;

			}
		}


	}

	.wrap {
		width: 100%;
		height: 100vh;
		background: $maincolor;

		.jp-bnt {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 60rpx;
			text-align: center;
			opacity: 1;
			width: 300rpx;
			margin: 0 auto;
			padding: 20rpx;
			color: #fff;
		}

		.jgg {

			padding: 0 100rpx 100rpx 100rpx;
			margin: 0 auto;
		}
	}
</style>